<script lang="ts" setup>
import { useNotificationStore, type INotification } from '@/store/notificationStore';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';

const notificationStore = useNotificationStore();
const router = useRouter();

const { recentNotifications, unreadCount } = storeToRefs(notificationStore);

const handleNotificationClick = (notification: INotification) => {
  // 标记为已读
  notificationStore.markAsRead(notification.id);
  
  // 如果有目标路由，则跳转
  if (notification.targetRoute) {
    router.push(notification.targetRoute);
  }
};

const handleReadAll = () => {
  notificationStore.markAllAsRead();
};
</script>

<template>
  <VBadge :model-value="unreadCount > 0">
    <VBtn icon variant="text" color="default" size="small" class="mr-3">
      <VBadge :model-value="unreadCount > 0" :content="unreadCount.toString()" color="error">
        <VIcon icon="mdi-bell-outline" size="24" />
      </VBadge>

      <VMenu activator="parent" width="400px" location="bottom end" offset="14px">
        <VList class="py-0">
          <!-- 标题 -->
          <VListItem title="通知中心" class="notification-section" height="48px">
            <template #append>
              <VChip v-if="unreadCount > 0" color="primary" size="small">
                {{ unreadCount }} 条新消息
              </VChip>
            </template>
          </VListItem>

          <VDivider />
          
          <!-- 通知列表 -->
          <template v-if="recentNotifications.length > 0">
            <VListItem
              v-for="notification in recentNotifications"
              :key="notification.id"
              :title="notification.title"
              :subtitle="notification.message"
              :class="{ 'notification-unread': !notification.read }"
              link
              lines="two"
              min-height="80px"
              @click="handleNotificationClick(notification)"
            >
              <!-- 图标或头像 -->
              <template #prepend>
                <VListItemAction start>
                  <VAvatar
                    :color="notification.color || 'primary'"
                    :image="notification.avatar || undefined"
                    :icon="notification.icon || 'mdi-bell'"
                    size="40"
                    variant="tonal"
                  />
                </VListItemAction>
              </template>
              
              <!-- 时间和状态 -->
              <template #append>
                <div class="text-caption text-medium-emphasis">
                  {{ notification.time }}
                  <VIcon 
                    v-if="!notification.read" 
                    icon="mdi-circle" 
                    size="8" 
                    color="primary"
                    class="ml-1"
                  />
                </div>
              </template>
            </VListItem>
            <VDivider />
          </template>
          
          <!-- 无通知状态 -->
          <template v-else>
            <VListItem class="text-center py-8">
              <VIcon icon="mdi-bell-sleep" size="48" color="grey" class="mb-2" />
              <div class="text-body-2 text-grey">暂无通知</div>
            </VListItem>
          </template>
          
          <!-- 底部操作 -->
          <VListItem class="notification-section">
            <VBtn 
              block 
              variant="tonal" 
              color="primary"
              @click="handleReadAll"
              :disabled="unreadCount === 0"
            >
              全部标为已读
            </VBtn>
          </VListItem>
        </VList>
      </VMenu>
    </VBtn>
  </VBadge>
</template>

<style lang="scss">
.notification-section {
  padding: 14px !important;
}

.notification-unread {
  background-color: rgba(var(--v-theme-primary), 0.05);
  border-left: 3px solid rgb(var(--v-theme-primary));
}
</style>
